<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        >
          <template #default="{ filterForm }">
            <el-form-item label="读卡时间">
              <el-date-picker
                v-model="filterForm.queryTime"
                type="datetimerange"
                range-separator="-"
                style="width: 100%"
                @change="timeChange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </template>
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          :useAction="false"
        >
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdwarning/dzwl";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();

const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["DepName", "EmpName", "JanEmpCardNo", "gasDetection"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const table = ref();

const { getList, queryParams } = useAsyncData({
  APIS: {
    query: APIS.mjk,
  },
  formJson,
  table,
  proxy,
});
const deptTree = ref([]);
const fetchData = (pageForm, done) => {
  APIS.mjk({
    pageNum: pageForm.page,
    pageSize: pageForm.size,
    ...queryParams.value,
    queryTime: null,
    start: queryParams.value.queryTime ? queryParams.value.queryTime[0] : null,
    end: queryParams.value.queryTime ? queryParams.value.queryTime[1] : null,
  }).then((res) => {
    done({
      list: res.data.data,
      total: res.data.total,
    });
  });
};
const queryTime = ref([]);
const timeChange = () => {
  if (
    queryParams.value.queryTime.length == 2 &&
    queryParams.value.queryTime[0] &&
    queryParams.value.queryTime[1]
  ) {
    getList();
  }
};
onMounted(() => {
  deptTreeSelect().then((response) => {
    deptTree.value = response.data;
  });
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
